import React, { useState } from 'react';
import { Badge, TabBar } from 'antd-mobile';
import Icon, { ShopOutlined, ProductFilled, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons';
import { AppOutline, MessageOutline, HeartOutline, UserOutline, } from 'antd-mobile-icons';
import { Outlet, useNavigate } from 'react-router-dom';
import { BackTop, Cell } from '@nutui/nutui-react'
import '../Tabbar/tabbar.css'

export default function App() {
  const navigate = useNavigate()
  const tabs = [
    {
      key: '/chen/layout/home',
      title: '首页',
      icon: <ShopOutlined />,
    },
    {
      key: '/chen/layout/cate',
      title: '分类',
      icon: <ProductFilled />,
    },
    {
      key: '/chen/layout/shopcart',
      title: '购物车',
      icon: <ShoppingCartOutlined />,
    },
    {
      key: '/chen/layout/my',
      title: '我的',
      icon: <UserOutlined />,
    }
  ];

  let tab = (e) => {
    navigate(e)
    sessionStorage.setItem('tabKey', e)
    console.log(e);
  }

  return (
    <div className='App'>
      <Outlet></Outlet>
      <div className='App_TabBar'>
        <TabBar onChange={(e) => { tab(e) }} activeKey={sessionStorage.getItem('tabKey') ? sessionStorage.getItem('tabKey') : '/chen/layout/home'}>
          {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
        </TabBar>
      </div>
    </div>
  )
}
